<template>
	<view class="menuView">
		<view class="viewBlock">
			<scroll-view scroll-y :scroll-into-view="toView" :show-scrollbar="false" style="height: 350rpx;"
				@touchstart="touchstartFn" @touchend="touchendFn" @scroll="scroll">
				<view :class="{contentList: !tapOn, contentListMove: tapOn, contentClass: true}" ref="contentList">
					<!-- <view class="contentItem" style="background-color: #fff;" v-for="(item, index) in dataList" :key="index"
						:id="'item' + index">{{item}}</view> -->
					
					<view class="contentItem" id="item0">
						<view class="menuThingTitle"><view class="beginIcon"></view>记事通</view>
						<view class="menuThingItem" v-if="thingsList.length === 0" >
							<view style="width: 100%;text-align: center;color: #d9d9d9 ;">还没记录哦~</view>
						</view>
						<view class="menuThingItem" v-if="thingsList.length > 0" v-for="item in thingsList" :key="item.id">
							<view style="color: #ebebeb ;font-weight: 500;">{{item.title}}</view>
							<view style="display: flex; color: #ebebeb ;">
								<view v-if="item.dayNum !== 0">{{item.daynow === 0?'还有':'已经'}}</view>
								<view v-if="item.dayNum !== 0">{{item.dayNum}}</view>
								<view>{{item.dayNum === 0?'今天':'天'}}</view>
							</view>
						</view>
					</view>
					<view class="contentItem" id="item1">
						<view style="line-height: 100rpx;width: 100%;text-align:center;color:#d9d9d9;font-size: 28rpx;">各类小组件敬请期待~</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				intervalTimer: null,
				moveTimer: null,
				tapOn: false,
				touchOn: false,
				toView: 'item0',
				toIndex: 'item0',
				indexChangeTimer: null,
				thingsList: [],
				thingsJson: null
			};
		},
		mounted() {
			this.getMenuThingData()
		},
		methods: {
			getMenuThingData(){
				let that = this
				this.thingsList = []
				let value = uni.getStorageSync('thingsJosn');
				if (value) {
					let thingsJosn = JSON.parse(value)
					this.thingsJson = thingsJosn
					Object.keys(thingsJosn).sort().forEach(function(item){
					    that.thingsList.push(thingsJosn[item])
					})
					let timeElapsed = Date.now();
					let today = new Date(timeElapsed);
					today = today.toISOString()
					today = today.substr(0,10)
					for(let i = 0; i < this.thingsList.length; i++){
						if(this.getDaysBetween(this.thingsList[i].time,today) > 0){
							this.thingsList[i].daynow = 0
							this.thingsList[i].dayNum = this.getDaysBetween(this.thingsList[i].time,today)
						}else{
							this.thingsList[i].daynow = 1
							this.thingsList[i].dayNum = 0 - this.getDaysBetween(this.thingsList[i].time,today)
						}
					}
				}
				if(this.thingsList.length > 3){
					let list = []
					for(let i = 0; i < 3; i++){
						list.push(this.thingsList[i])
					}
					this.thingsList = list
				}
			},
			getDaysBetween(date1,date2){
			    var startDate = Date.parse(date1);
			    var endDate = Date.parse(date2);
			    if (startDate > endDate){
			        let temp = startDate
					startDate = endDate
					endDate = temp
					var days=(endDate - startDate)/(1*24*60*60*1000);
					return days;
			    }
			    if (startDate==endDate){
			        return 0;
			    }
			    var days=(endDate - startDate)/(1*24*60*60*1000);
				days = 0 - Number(days)
			    return days;
			},
			touchstartFn(e) {
				this.touchOn = true
			},
			touchendFn(e) {
				this.touchOn = false
				this.toView = this.toIndex
			},
			scroll(e) {
				this.toView = ''
				this.tapOn = true
				if (this.moveTimer) {
					clearTimeout(this.moveTimer)
					this.moveTimer = null
				}
				let y = (e.detail.scrollTop / 196).toFixed(0)
				this.moveTimer = setTimeout(() => {
					this.toIndex = 'item' + y
					if(!this.touchOn){
						if(this.toView !== this.toIndex){
							this.toView = this.toIndex
						}
						if(this.tapOn){
							this.tapOn = false
						}
					}
				}, 1)
			}
		},
	};
</script>

<style>
	.menuView {
		padding: 0;
		margin: 30rpx 0;
		box-sizing: border-box;
	}

	.viewBlock {
		width: 700rpx;
		height: 350rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(230, 230, 230, 0.5);
		/* background-color: rgba(245, 245, 245, 0.5); */
		background-color: rgba(145, 145, 145, 0.5);
		overflow: hidden;
	}

	.viewBlock .contentList {
		width: 100%;
		box-sizing: border-box;
	}

	.viewBlock .contentListMove {
		width: 92%;
		box-sizing: border-box;
		margin: auto;
	}

	.viewBlock .contentItem {
		width: 100%;
		height: 350rpx;
		box-sizing: border-box;
	}
	
	.contentItem .menuThingTitle{
		height: 60rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 60rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
		letter-spacing: 1rpx;
		color: rgba(240, 240, 240, 0.9);
		border-bottom: 1rpx solid rgba(230, 230, 230, 0.3);
		display: flex;
		align-items: center;
	}
	
	.contentItem .menuThingTitle .beginIcon{
		width: 16rpx;
		height: 16rpx;
		margin-right: 10rpx;
		border-radius: 100%;
		background-color: rgba(45, 205, 241, 0.9);
	}
	
	.contentItem .menuThingItem{
		width: calc(100% - 40rpx);
		box-sizing: border-box;
		height: 60rpx;
		margin: 20rpx;
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
		font-size: 30rpx;
		border-bottom: 1rpx dashed rgba(230, 230, 230, 0.7);
	}
</style>
